<template>
  <view class="product-block" @click="navigateToDetails">
    <template v-if="display">
      <v-image
        height="340rpx"
        width="340rpx"
        border-radius="16rpx 16rpx 0 0"
        :src="product.image"
        mode="aspectFill"
      />
      <view class="product-info">
        <view class="product-name">
          {{ product.name }}
        </view>
        <view class="product-price">
          <v-price size="32rpx" :price="product.min_sell_price" />
          <view class="label">
            到手价
          </view>
          <template v-if="sub === 'markprice'">
            <view v-if="product.min_market_price" class="market-price">
              {{ `¥${product.min_market_price.toFixed(2)}` }}
            </view>
          </template>
          <template v-else-if="sub === 'quantity'">
            <view v-if="(product as SpuVO).sales_volume" class="quantity">
              {{ `已售${(product as SpuVO).sales_volume}件` }}
            </view>
          </template>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    product: SpuVO | ProductItem;
    sub?: 'markprice' | 'quantity';
    display?: boolean;
  }>(),
  {
    display: true,
    sub: 'markprice'
  }
);

const navigateToDetails = () => {
  uni.navigateTo({
    url: `/pages/product/product-details?id=${props.product.id}`
  });
};
</script>

<style lang="scss" scoped>
.product-block {
  height: 448rpx;
  width: 340rpx;
  display: flex;
  flex-direction: column;
  border-radius: 16rpx;
  background-color: white;
  .product-info {
    padding: 12rpx 12rpx 6rpx;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .product-name {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-break: break-all;
      font-size: 24rpx;
    }
    .product-price {
      display: flex;
      align-items: baseline;
      gap: 0 8rpx;
      white-space: nowrap;
      .label {
        font-size: 20rpx;
        color: #ff2f3b;
        flex-shrink: 0;
      }
      .market-price {
        font-size: 24rpx;
        color: #999999;
        text-decoration: line-through;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
      }
      .quantity {
        margin-left: auto;
        font-size: 22rpx;
        color: #999999;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
      }
    }
  }
}
</style>
